ã¢ãã¡ãŒã·ã§ã³ã¯ã©ã¹åæã§CSS View Transitionsã®åãæå€§éã«åŒãåºããŸããããã°ããŒãã«ãªãŠã§ãã¢ããªã±ãŒã·ã§ã³åãã«ãã·ãŒã ã¬ã¹ã§é åçãªãã©ã³ãžã·ã§ã³ãäœæããæ¹æ³ãåŠã³ãŸããç¶æ¿ãåæããã¹ããã©ã¯ãã£ã¹ãæ¢æ±ããŸãã
CSS View Transitionã®ã¯ã©ã¹ç¶æ¿ïŒã¢ãã¡ãŒã·ã§ã³ã¯ã©ã¹åæããã¹ã¿ãŒãã
çµ¶ããé²åãããŠã§ãéçºã®äžçã«ãããŠããŠãŒã¶ãŒã«ã·ãŒã ã¬ã¹ã§é åçãªäœéšãæäŸããããšã¯æãéèŠã§ããã¢ãã¡ãŒã·ã§ã³ã¯ãããéæããäžã§éèŠãªåœ¹å²ãæãããCSS View Transitionsã¯ãŠã§ãããŒãžã®ç°ãªãç¶æ éã®æµåçã§èŠèŠçã«é åçãªå€åãäœæããããã®åŒ·åãªã¡ã«ããºã ãæäŸããŸãããã®èšäºã§ã¯ãCSS View Transitionã®ã¯ã©ã¹ç¶æ¿ãšã¢ãã¡ãŒã·ã§ã³ã¯ã©ã¹åæã®è€éããæãäžãããŠãŒã¶ãŒã€ã³ã¿ãŒãã§ãŒã¹ïŒUIïŒã¢ãã¡ãŒã·ã§ã³ãåäžããããéçºè ã®ããã®å æ¬çãªã¬ã€ããæäŸããŸãã
CSS View Transitionsãçè§£ãã
CSSã®æ¯èŒçæ°ããæ©èœã§ããCSS View Transitionsã¯ãéçºè ãè€éãªJavaScriptã©ã€ãã©ãªãå ¥ãçµãã ã¢ãã¡ãŒã·ã§ã³ã·ãŒã±ã³ã¹ã«é ŒãããšãªãããŠã§ãããŒãžã®ç°ãªãç¶æ éãç§»è¡ããéã«ã¹ã ãŒãºã§èªç¶ãªã¢ãã¡ãŒã·ã§ã³ãäœæããããšãå¯èœã«ããŸãããã®äžå¿çãªåçã¯ãå€ãç¶æ ãšæ°ããç¶æ ã®ã¹ãããã·ã§ããããã£ããã£ãããããã®éã®ãã©ã³ãžã·ã§ã³ãã¢ãã¡ãŒã·ã§ã³åããããšã§ãã
view-transition-nameããããã£ã¯ãView Transitionsã®åºç€ã§ããèŠçŽ ã«äžæã®ååãå²ãåœãŠãããšã§ããã©ãŠã¶ã«ãã®ãã©ã³ãžã·ã§ã³ã远跡ããããã«æç€ºããŸããèŠçŽ ã®ã³ã³ãã³ããå€èгã倿Žããããšããã©ãŠã¶ãã¢ãã¡ãŒã·ã§ã³ãåŠçããŸãã
CSS View Transitionsã®äž»ãªå©ç¹ïŒ
- ãŠãŒã¶ãŒäœéšã®åäžïŒ ã·ãŒã ã¬ã¹ãªãã©ã³ãžã·ã§ã³ã¯ããŠãŒã¶ãŒãšã³ã²ãŒãžã¡ã³ããé«ããããæŽç·Žãããå°è±¡ãäžããŸãã
- ã³ãŒãã®ç°¡çŽ åïŒ è€éãªJavaScriptã¢ãã¡ãŒã·ã§ã³ã©ã€ãã©ãªã®å¿ èŠæ§ãæžãããŸãã
- ããã©ãŒãã³ã¹ã®åäžïŒ å¹ççãªã¬ã³ããªã³ã°ã®ããã«ãã©ãŠã¶ã«ãã£ãŠæé©åãããŠããŸãã
- 宣èšçãªã¢ãã¡ãŒã·ã§ã³ïŒ åœä»€çãªJavaScriptããŒã¹ã®ã¢ãã¡ãŒã·ã§ã³ãšæ¯èŒããŠãçè§£ãããããä¿å®ã容æã§ãã
CSS View Transitionsã«ãããã¯ã©ã¹ç¶æ¿
ã¯ã©ã¹ç¶æ¿ã¯ãã¢ãã¡ãŒã·ã§ã³ããã管çãããããã¹ã±ãŒã©ãã«ã§ãä¿å®ããããããäžã§éèŠãªåœ¹å²ãæãããŸããããã«ãããã¢ãã¡ãŒã·ã§ã³ããããã£ã®åºæ¬ã»ãããå®çŸ©ãããããç¹å®ã®ã¯ã©ã¹ã§æ¡åŒµãŸãã¯äžæžãããŠãããŸããŸãªãã©ã³ãžã·ã§ã³ã·ããªãªã«å¯Ÿå¿ã§ããŸãã
æŠå¿µïŒ å ±éã®ã¢ãã¡ãŒã·ã§ã³ããããã£ãå«ãåºæ¬ã¯ã©ã¹ãå®çŸ©ããŸããæ¬¡ã«ãåºæ¬ã¯ã©ã¹ããç¶æ¿ããåã¯ã©ã¹ãäœæããç¹å®ã®ããããã£ã倿ŽãŸãã¯è¿œå ããŠãç¹å®ã®ãŠãŒã¹ã±ãŒã¹ã«åãããŠã¢ãã¡ãŒã·ã§ã³ã調æŽããŸããããã«ãããã³ãŒãã®åå©çšãä¿é²ãããåé·æ§ãæžå°ããŸãã
å®è·µäŸïŒ ãã¥ãŒãã©ã³ãžã·ã§ã³äžã«èŠçŽ ã®äžéæåºŠãã¢ãã¡ãŒã·ã§ã³åãããã·ããªãªãèããŠã¿ãŸããããæ¬¡ã®ãããªåºæ¬ã¯ã©ã¹ãäœæã§ããŸãïŒ
.base-transition {
view-transition-name: element-transition;
transition: opacity 0.3s ease-in-out;
}
ãã®åºæ¬ã¯ã©ã¹ã¯view-transition-nameãèšå®ããåºæ¬çãªäžéæåºŠãã©ã³ãžã·ã§ã³ãå®çŸ©ããŸããæ¬¡ã«ããã©ã³ãžã·ã§ã³ã®åäœã倿Žããããã«åã¯ã©ã¹ãäœæã§ããŸãïŒ
.fade-in {
opacity: 1;
}
.fade-out {
opacity: 0;
}
HTMLã§ã¯ãå¿ èŠã«å¿ããŠãããã®ã¯ã©ã¹ãé©çšããŸãïŒ
<div class="base-transition fade-in">Content</div>
ã¢ãã¡ãŒã·ã§ã³ã¯ã©ã¹åæïŒåå©çšå¯èœãªã¢ãã¡ãŒã·ã§ã³ã®æ§ç¯
ã¢ãã¡ãŒã·ã§ã³ã¯ã©ã¹åæã¯ãã¯ã©ã¹ç¶æ¿ãããã«äžæ©é²ãããã®ã§ããããã«ãããè€æ°ã®ã¢ãã¡ãŒã·ã§ã³ã¯ã©ã¹ãçµã¿åãããŠãè€éã§é«åºŠã«ã«ã¹ã¿ãã€ãºããããã©ã³ãžã·ã§ã³ãäœæã§ããŸãããã®ã¢ãããŒãã¯ã¢ãžã¥ãŒã«æ§ãä¿é²ããåå©çšå¯èœãªã¢ãã¡ãŒã·ã§ã³ã³ã³ããŒãã³ãã®ã©ã€ãã©ãªã®æ§ç¯ãšä¿å®ã容æã«ããŸãã
ã¢ã€ãã¢ïŒ ã¢ãã¡ãŒã·ã§ã³ã®ç¹å®ã®åŽé¢ïŒäŸïŒãã§ãŒãã€ã³ãã¹ã©ã€ãã€ã³ãã¹ã±ãŒã«ã¢ããïŒãããããæ åœããåã ã®ã¢ãã¡ãŒã·ã§ã³ã¯ã©ã¹ã®ã³ã¬ã¯ã·ã§ã³ãäœæããŸããæ¬¡ã«ããããã®ã¯ã©ã¹ãçµã¿åãããŠãç®çã®å¹æãäœæããŸãã
ã¯ã©ã¹åæã®å©ç¹ïŒ
- ã¢ãžã¥ãŒã«æ§ïŒ åã¯ã©ã¹ã¯åäžã®ã¢ãã¡ãŒã·ã§ã³åŽé¢ã«çŠç¹ãåœãŠãŠãããããçè§£ããããä¿å®ã容æã§ãã
- åå©çšæ§ïŒ ã¯ã©ã¹ã¯ç°ãªãèŠçŽ ããã©ã³ãžã·ã§ã³ã·ããªãªã§åå©çšã§ããŸãã
- æè»æ§ïŒ ã¢ãã¡ãŒã·ã§ã³ã¯ã©ã¹ãç°¡åã«çµã¿åãããŠå€æŽããè€éãªå¹æãå®çŸã§ããŸãã
- ä¿å®æ§ïŒ åäžã®ã¢ãã¡ãŒã·ã§ã³ã¯ã©ã¹ãžã®å€æŽããã·ã¹ãã å šäœã«äžãã圱é¿ã¯å°ãããªããŸãã
äŸïŒ 次ã®ã¢ãã¡ãŒã·ã§ã³ã¯ã©ã¹ãèããŠã¿ãŸãããïŒ
.fade-in {
opacity: 1;
transition: opacity 0.3s ease-in-out;
}
.slide-in-right {
transform: translateX(0);
transition: transform 0.3s ease-in-out;
}
.slide-in-left {
transform: translateX(0);
transition: transform 0.3s ease-in-out;
}
.slide-out-right {
transform: translateX(100%);
transition: transform 0.3s ease-in-out;
opacity:0;
}
.slide-out-left {
transform: translateX(-100%);
transition: transform 0.3s ease-in-out;
opacity:0;
}
ãããã®ã¯ã©ã¹ãçµã¿åãããŠãããŸããŸãªãã©ã³ãžã·ã§ã³å¹æãäœæã§ããŸããäŸãã°ãèŠçŽ ããã§ãŒãã€ã³ãããå³ããã¹ã©ã€ãã€ã³ãããã«ã¯ïŒ
<div class="fade-in slide-in-right">Content</div>
å®è·µçãªå®è£ ïŒã¹ããããã€ã¹ãããã¬ã€ã
ã¯ã©ã¹ç¶æ¿ãšåæã䜿çšããŠããã²ãŒã·ã§ã³ã¡ãã¥ãŒãã©ã³ãžã·ã§ã³ãäœæããå®è·µçãªäŸãèŠãŠãããŸãããã
1. HTMLæ§é ïŒ
<nav>
<button id="menu-toggle">Menu</button>
<ul id="menu" class="menu">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
2. åºæ¬CSSïŒããŒã¹ã¹ã¿ã€ã«ïŒïŒ
.menu {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
z-index: 1000;
transform: translateX(-100%); /* Initially hidden */
view-transition-name: menu-transition;
transition: transform 0.3s ease-in-out;
opacity: 0;
}
.menu a {
color: white;
text-decoration: none;
font-size: 1.5rem;
padding: 1rem;
}
3. ã¢ãã¡ãŒã·ã§ã³ã¯ã©ã¹ïŒåæïŒïŒ
.menu-open {
transform: translateX(0);
opacity: 1;
}
.menu-closed {
transform: translateX(-100%);
opacity: 0;
}
4. JavaScriptïŒã¡ãã¥ãŒã®åãæ¿ãïŒïŒ
const menuToggle = document.getElementById('menu-toggle');
const menu = document.getElementById('menu');
menuToggle.addEventListener('click', () => {
menu.classList.toggle('menu-open');
menu.classList.toggle('menu-closed');
});
5. 説æïŒ
- åºæ¬CSSã¯ãã¡ãã¥ãŒã®åæç¶æ
ãèšå®ãã
view-transition-nameãå®çŸ©ããŸãã menu-openãšmenu-closedã¯ã©ã¹ãã¢ãã¡ãŒã·ã§ã³ãå¶åŸ¡ããŸãã- JavaScriptã¯ãã¡ãã¥ãŒãã¿ã³ãã¯ãªãã¯ããããšãã«ãããã®ã¯ã©ã¹ãåãæ¿ããŸãã
- ã¡ãã¥ãŒã®`transform`ããããã£ãã¢ãã¡ãŒã·ã§ã³åãããŸãã
ã°ããŒãã«ã¢ããªã±ãŒã·ã§ã³ã«é¢ããäž»ãªèæ ®äºé ïŒ
- ã¢ã¯ã»ã·ããªãã£ïŒ ãã©ã³ãžã·ã§ã³ãé害ãæã€ãŠãŒã¶ãŒã®åŠšãã«ãªããªãããã«ããŸããã¢ãã¡ãŒã·ã§ã³ãæžãããç¡å¹ã«ãããªãã·ã§ã³ãæäŸããŠãã ããã
- ããã©ãŒãã³ã¹ïŒ ããŸããŸãªããã€ã¹ããããã¯ãŒã¯æ¡ä»¶ã§ã¢ãã¡ãŒã·ã§ã³ããã¹ãããŸããã¹ã ãŒãºãªããã©ãŒãã³ã¹ã®ããã«ãã©ã³ãžã·ã§ã³ãæé©åããŠãã ããã
- åœéåïŒ ã¢ãã¡ãŒã·ã§ã³ã§ããã¹ãã®æ¹åïŒRTLïŒãæåçãªå¥œã¿ãèæ ®ããŠãã ããã
- ããŒã«ãªãŒãŒã·ã§ã³ïŒ ã¢ãã¡ãŒã·ã§ã³ã¯ãæåçã«ææãªãžã§ã¹ãã£ãŒã嫿ãé¿ããã°ããŒãã«ã¹ã¿ã³ããŒããèŠèŠçã«åæ ããå¿ èŠããããŸãã
- ãã©ãŠã¶ã®äºææ§ïŒ ããŸããŸãªãã©ãŠã¶ãšãã®ããŒãžã§ã³ã§ã¢ãã¡ãŒã·ã§ã³ãåžžã«ãã¹ãããŠãã ãããå¿ èŠã«å¿ããŠãã¬ãã£ãã¯ã¹ã䜿çšããŸãããçŸä»£ã®ãã©ãŠã¶ã¯äžè¬çã«View Transitionsãååã«ãµããŒãããŠããŸãã
- ã¢ãã€ã«æé©åïŒ ã¢ãã€ã«ããã€ã¹ã§ã¢ãã¡ãŒã·ã§ã³ããã¹ãããã¬ã¹ãã³ã·ããã¶ã€ã³ãã¢ãã¡ãŒã·ã§ã³ãã©ã³ãžã·ã§ã³ãšå®å šã«çµ±åãããŠããããšã確èªããŠãã ããã
ãã¹ããã©ã¯ãã£ã¹ãšé«åºŠãªãã¯ããã¯
1. ããã©ãŒãã³ã¹ã®æé©åïŒ
- é«ã³ã¹ããªããããã£ãé¿ããïŒ ã¬ã€ã¢ãŠãã®å€æŽãåŒãèµ·ããããããã£ïŒäŸïŒwidthãheightïŒã®ã¢ãã¡ãŒã·ã§ã³ã¯ãtransformãopacityã®ãããªããããã£ãããããã©ãŒãã³ã¹ãžã®è² è·ãé«ããªãå¯èœæ§ããããŸãã
- ããŒããŠã§ã¢ã¢ã¯ã»ã©ã¬ãŒã·ã§ã³ïŒ
transform: translateZ(0);ã䜿çšããŠããŒããŠã§ã¢ã¢ã¯ã»ã©ã¬ãŒã·ã§ã³ã匷å¶ããŸããããã«ãããç¹ã«ã¢ãã€ã«ããã€ã¹ã§ã¢ãã¡ãŒã·ã§ã³ãæ»ããã«ãªãããšããããããŸãã - è€éããæžããïŒ ã¢ãã¡ãŒã·ã§ã³ã¯ã·ã³ãã«ã«ä¿ã¡ãŸããèŠçŽ ãé床ã«ã¢ãã¡ãŒã·ã§ã³åãããšãããã©ãŒãã³ã¹ã®ããã«ããã¯ã«ãªãå¯èœæ§ããããŸãã
- `will-change`ããããã£ã䜿çšããïŒ ã¢ãã¡ãŒã·ã§ã³åãããèŠçŽ ã«
will-changeããããã£ãé©çšããŠããã©ãŠã¶ãäºåã«ã¬ã³ããªã³ã°ãæé©åã§ããããã«ããŸããäŸïŒwill-change: transform, opacity;ããã ãããªãœãŒã¹ãæ¶è²»ããå¯èœæ§ããããããæ§ããã«äœ¿çšããŠãã ããã
2. JavaScriptãšã®çµã¿åããïŒ
- ã¢ãã¡ãŒã·ã§ã³ã®ããªã¬ãŒïŒ JavaScriptã䜿çšããŠã¢ãã¡ãŒã·ã§ã³ã¯ã©ã¹ã远å ãŸãã¯åé€ããŸãã
- ã¢ãã¡ãŒã·ã§ã³ã¿ã€ãã³ã°ïŒ JavaScriptã®`requestAnimationFrame()`ã䜿çšããŠããã现ãããªå¶åŸ¡ã§ã¢ãã¡ãŒã·ã§ã³ã®ã¿ã€ãã³ã°ã管çããŸãã
- é«åºŠãªå¹æïŒ CSS View Transitionsãšçµ±åããããè€éãªã¢ãã¡ãŒã·ã§ã³ã·ãŒã±ã³ã¹ã®ããã«JavaScriptãæŽ»çšããŸãã
3. ãšã©ãŒãã³ããªã³ã°ãšãã©ãŒã«ããã¯ïŒ
- æ©èœæ€åºïŒ CSSã®æ©èœã¯ãšãªïŒäŸïŒ
@supports (view-transition-name: element)ïŒã䜿çšããŠãView Transitionsã®ãã©ãŠã¶ãµããŒããæ€åºããå¿ èŠã«å¿ããŠãã©ãŒã«ããã¯ã¢ãã¡ãŒã·ã§ã³ãæäŸããŸãã - ã°ã¬ãŒã¹ãã«ãã°ã©ããŒã·ã§ã³ïŒ View TransitionsããµããŒããããŠããªãããŸãã¯ç¡å¹ã«ãªã£ãŠããå Žåã§ãããŠã§ããµã€ããæ©èœãã䜿çšå¯èœã§ããããšã確èªããŸãã
4. é«åºŠãªã¢ãã¡ãŒã·ã§ã³ãã¯ããã¯ïŒ
- ããŒãã¬ãŒã ã¢ãã¡ãŒã·ã§ã³ïŒ CSSããŒãã¬ãŒã ã䜿çšããŠè€éãªã¢ãã¡ãŒã·ã§ã³ãäœæããã¯ã©ã¹ããŒã¹ã®ãã©ã³ãžã·ã§ã³ãšçµ±åããŸãã
- ã¹ã¿ãã¬ãŒãã¢ãã¡ãŒã·ã§ã³ïŒ JavaScriptãšCSSãã©ã³ãžã·ã§ã³ã䜿çšããŠããããã€ãããã¯ãªå¹æã®ããã«ã¹ã¿ãã¬ãŒãã¢ãã¡ãŒã·ã§ã³ãäœæããŸãã
- ã«ã¹ã¿ã ã€ãŒãžã³ã°é¢æ°ïŒ CSSã®cubic-bezier()颿°ã䜿çšããŠããŠããŒã¯ãªçŸåŠã®ããã«ã¢ãã¡ãŒã·ã§ã³ã®ã€ãŒãžã³ã°ã«ãŒããã«ã¹ã¿ãã€ãºããŸãã
ã°ããŒãã«ã¢ããªã±ãŒã·ã§ã³ãšèæ ®äºé
ã°ããŒãã«ãªãªãŒãã£ãšã³ã¹åãã®ãŠã§ãã¢ããªã±ãŒã·ã§ã³ãéçºããéã«ã¯ãã·ãŒã ã¬ã¹ã§å æ¬çãªäœéšãä¿èšŒããããã«ãããã€ãã®èŠçŽ ãèæ ®ããããšãéèŠã§ãïŒ
- ã¢ã¯ã»ã·ããªãã£ïŒ ã¢ã¯ã»ã·ããªãã£ã¬ã€ãã©ã€ã³ïŒWCAGïŒãéµå®ããé害ãæã€ãŠãŒã¶ãŒãå«ããã¹ãŠã®ãŠãŒã¶ãŒãã¢ãã¡ãŒã·ã§ã³ã«ã¢ã¯ã»ã¹ã§ããããã«ããŸããã¢ãã¡ãŒã·ã§ã³ãç¡å¹ã«ãããæžãããããããªãã·ã§ã³ãæäŸããARIA屿§ã䜿çšããŠã¢ãã¡ãŒã·ã§ã³åãããèŠçŽ ã«æå³çãªæå³ãæäŸããŸãã
- ããã©ãŒãã³ã¹ïŒ ããŸããŸãªããã€ã¹ããããã¯ãŒã¯æ¡ä»¶ã«åãããŠã¢ãã¡ãŒã·ã§ã³ãæé©åããŸããç¹ã«ã€ã³ã¿ãŒãããæ¥ç¶ãé ãå°åã®ãŠãŒã¶ãŒã®ããã«ãããŒãžèªã¿èŸŒã¿æéã«å¯Ÿããã¢ãã¡ãŒã·ã§ã³ã®åœ±é¿ãèæ ®ããŸãã
- ããŒã«ãªãŒãŒã·ã§ã³ãšåœéåïŒI18nïŒïŒ ããŸããŸãªèšèªãæåçãªå¥œã¿ãèæ ®ããŸããã¢ãã¡ãŒã·ã§ã³ãç°ãªãæåã§æå³ããªãæå³ãäŒããªãããã«ããŸããå³ããå·ŠãžïŒRTLïŒã¬ã€ã¢ãŠãã®äœ¿çšãèæ ®ããããã«å¿ããŠã¢ãã¡ãŒã·ã§ã³ãé©å¿ãããŸãã
- ãã¹ããšãŠãŒã¶ãŒãã£ãŒãããã¯ïŒ ããŸããŸãªãã©ãŠã¶ãããã€ã¹ãç»é¢ãµã€ãºã§ã¢ãã¡ãŒã·ã§ã³ã培åºçã«ãã¹ãããŸãããŠãŒã¶ãŒããã®ãã£ãŒãããã¯ãåéããŠããŠãŒã¶ããªãã£ã®åé¡ãç¹å®ãã察åŠããŸãã
- æåçãªé æ ®ïŒ ç¹å®ã®æåã§äžå¿«ãŸãã¯ç¡ç¥çµãšèŠãªãããå¯èœæ§ã®ããã¢ãã¡ãŒã·ã§ã³ã®äœ¿çšãé¿ããŸããæåçãªèŠç¯ã«æ³šæãæããäžè¬åãé¿ããŸãã
- ã¿ã€ã ãŸãŒã³ïŒ ã¢ããªã±ãŒã·ã§ã³ã®ã°ããŒãã«ãªåŽé¢ãèæ ®ããŸããã¢ãã¡ãŒã·ã§ã³ãæéã«äŸåããããŠãŒã¶ãŒãæéå¶éãªãã§UIã«ã¢ã¯ã»ã¹ã§ããããšã確èªããŸãã
ç¹å®ã®UIèŠçŽ ãžã®CSS View Transitionsã®æŽ»çš
ããŸããŸãªUIèŠçŽ ã«CSS View Transitionsã䜿çšããæ¹æ³ãæ¢ã£ãŠã¿ãŸãããïŒ
1. ããŒãžãã©ã³ãžã·ã§ã³ïŒ
ããŒãžãã©ã³ãžã·ã§ã³ã¯ããŠã§ãã¢ããªã±ãŒã·ã§ã³å
ã®ããŒãžéã«èŠèŠçãªé£ç¶æ§ãäœãåºããŸããåããŒãžã®åšãã«ã©ãããŒã䜿çšãããã®ã©ãããŒã«view-transition-nameãå²ãåœãŠãŸãããããŠãããŒãžããã²ãŒã·ã§ã³æã«ããã©ã³ãžã·ã§ã³ã¯å€ãããŒãžã®äžã«æ°ããããŒãžã®ã©ãããŒãã¢ãã¡ãŒã·ã§ã³åããŸããfade-inãslide-in广ãªã©ãå€ãã®å¹æãå©çšããŠé
åçãªäœéšãäœãåºãããšãã§ããŸãã
/* Common Styles for pages, assigned to the page wrapper. */
.page {
view-transition-name: page-transition;
position: absolute;
top: 0;
left: 0;
width: 100%;
min-height: 100vh;
opacity: 0;
transition: opacity 0.3s ease-in-out;
}
/* Fade-in animation for pages. Applied when page loads. */
.page-in {
opacity: 1;
}
2. ã€ã¡ãŒãžã®ã£ã©ãªãŒã®ãã©ã³ãžã·ã§ã³ïŒ
é
åçãªã€ã¡ãŒãžã®ã£ã©ãªãŒäœéšãäœæããŸããçŸåšã®ç»åãšæ¬¡ã®ç»åã®éã®ãã©ã³ãžã·ã§ã³ãã¢ãã¡ãŒã·ã§ã³åããŸãã<img>èŠçŽ ã«view-transition-nameã䜿çšããŸãã
.gallery-image {
view-transition-name: image-transition;
transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
/* other styles */
}
/* Initial styles for images as they enter */
.gallery-image-enter {
opacity: 0;
transform: scale(0.8);
}
/* Styles as the image loads */
.gallery-image-active {
opacity: 1;
transform: scale(1);
}
3. ãã©ãŒã éä¿¡ã®ãã©ã³ãžã·ã§ã³ïŒ
ãã©ãŒã éä¿¡ã®æåãŸãã¯å€±æã瀺ãã¢ãã¡ãŒã·ã§ã³ãäœæããŸãããã©ãŒã èªäœããŸãã¯åå¥ã®æå/倱æã¡ãã»ãŒãžãã¢ãã¡ãŒã·ã§ã³åããŸãã
.form-container {
view-transition-name: form-container;
transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
}
.form-container-submitting {
opacity: 0.5;
transform: scale(0.9);
}
.form-container-success {
opacity: 1;
transform: scale(1.05);
}
4. ã¢ã³ãŒãã£ãªã³ãšã¿ãã®ãã©ã³ãžã·ã§ã³ïŒ
ã¢ã³ãŒãã£ãªã³ãã¿ãããã«ã®ééãã¢ãã¡ãŒã·ã§ã³åããŠããŠãŒã¶ãŒäœéšãåäžãããŸããããã§ããããã«èŠçŽ ããããã¯ããã«å
ã®åã
ã®ã³ã³ãã³ãèŠçŽ ã«view-transition-nameã䜿çšããŸãã
.accordion-panel {
view-transition-name: accordion-panel;
transition: height 0.3s ease-in-out, opacity 0.3s ease-in-out;
overflow: hidden;
}
.accordion-panel-open {
opacity: 1;
}
.accordion-panel-closed {
height: 0;
opacity: 0;
}
çµè«ïŒã°ããŒãã«ãªãŠãŒã¶ãŒäœéšã®åäž
CSS View Transitionsã¯ãã¯ã©ã¹ç¶æ¿ãšã¢ãã¡ãŒã·ã§ã³ã¯ã©ã¹åæã®åãšçµã¿åãããããšã§ãæ²¡å ¥æã®ããé åçãªãŠãŒã¶ãŒäœéšãäœãåºãããéçºè ã«ãšã£ãŠåŒ·åãªããŒã«ããããæäŸããŸãããããã®ãã¯ããã¯ãåãå ¥ãããã¹ããã©ã¯ãã£ã¹ãéµå®ããããšã§ãå Žæãããã€ã¹ã«é¢ä¿ãªããã¹ã ãŒãºã§çŽæçãªãŠãŒã¶ãŒäœéšãæäŸãããŠã§ãã¢ããªã±ãŒã·ã§ã³ãäœæã§ããŸããã·ãŒã ã¬ã¹ãªãã©ã³ãžã·ã§ã³ãäœæããèœåã¯ãããæ§é åããä¿å®ããããã³ãŒãããŒã¹ãšçžãŸã£ãŠããŠãŒã¶ãŒæºè¶³åºŠã®åäžãšã¢ããªã±ãŒã·ã§ã³ããã©ãŒãã³ã¹ã®æ¹åã«çŽæ¥ã€ãªãããŸãã
ãŠã§ãæè¡ãé²åããã«ã€ããŠãææ°ã®æ©èœããã¹ããã©ã¯ãã£ã¹ãåžžã«ææ¡ããŠããããšãéèŠã§ããCSS View Transitionsã¯ãŠã§ãã¢ãã¡ãŒã·ã§ã³ã«ããã倧ããªé²æ©ã§ããããããã®ãã¯ããã¯ãç¿åŸããããšã¯ãééããªãããªãã®ããã³ããšã³ãéçºã¹ãã«ãåäžãããã°ããŒãã«ãªãªãŒãã£ãšã³ã¹ã®ããã«çã«åªãããŠã§ãäœéšãåµé ããããšãå¯èœã«ããŸãã
ã°ããŒãã«ãªèŠçŽ ãèæ ®ããããšãå¿ããªãã§ãã ããïŒã¢ã¯ã»ã·ããªãã£ãããã©ãŒãã³ã¹ãåœéåããããŠæåçãªé æ ®ã¯ãã°ããŒãã«ãªãŠã§ãã¢ããªã±ãŒã·ã§ã³ãå±éããéã«ãã¹ãŠéèŠã§ããæ éãªèšç»ãšææ ®æ·±ãå®è£ ã¯ãçã«å æ¬çã§æ®éçã«ã¢ã¯ã»ã¹å¯èœãªãŠã§ãäœéšãåµé ããããã«äžå¯æ¬ ã§ãã